<template>
    <transition name="select-drop">
        <div :class="dropdownCls" v-if="show">
            <div :class="downItemCls" :style="showLiNum">
                <li v-if="!parent.hideLoading && parent.loading">
                    <div class="mj-autocomplete-load" v-loading="true"></div>
                </li>
                <slot v-else></slot>
            </div>
        </div>
    </transition>
</template>
<script>
import { prefixCls } from "../prefix";
import './autocomplete.css'
export default {
    name: "AutocompleteSuggestions",
    data() {
        return {
            liHeight: 30, //li的高度
            prefixCls: prefixCls,
            parent: this.$parent,
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        suggestions: {//展示数据
            type: Array,
            default: [],
        },
        showNum: {//展示数据条数
            type: Number,
            default: 9,
        },
        transferClassName: String
    },
    computed: {
        showLiNum() {
            const parent = this.parent
            if (!parent.hideLoading && parent.loading) {
                return ''
            }

            if (this.showNum && this.suggestions.length > this.showNum) {
                return `height:${this.liHeight * this.showNum}px`;
            }
        },
        dropdownCls() {
            return {
                [prefixCls + '-autocomplete-drop-down']: true,
                [this.transferClassName]: this.transferClassName && this.$parent.transfer
            }
        },
        downItemCls() {
            return [
                {
                    [prefixCls + '-autocomplete-drop-down-border']: true,
                    [prefixCls + '-autocomplete-border']: this.$parent.suggestions.length > 0 && this.$parent.suggestions
                }
            ]
        }
    }
};
</script>
